<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片展示页面模板-01</title>
    <!-- 清楚元素默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 自定义 css 变量 -->
    <link rel="stylesheet" href="./css/variable.css">
    <!-- 页面标题样式 -->
    <link rel="stylesheet" href="./css/page-title.css">
    <!-- 图片展示项样式 -->
    <link rel="stylesheet" href="./css/image.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 图片展示页面 -->
    <div class="img-display-page">
        <!-- 图片展示页面中的标题 -->
        <div class="img-display-page__title">
            <!-- 标题 -->
            <h1>图片展示页面模板-01</h1>
            <!-- 副标题 -->
            <p>这是图片展示页面模板-01</p>
        </div>
        <!-- 图片展示项容器 -->
        <div class="img-display-page__img-item-container">
            <!-- 图片展示项 -->
            <div class="img-item">
                <!-- 内容容器 -->
                <div class="content-container">
                    <!-- 内容 -->
                    <div class="content">
                        <!-- 图片 -->
                        <div class="img">
                            <img src="./assets/img-01.jpg" alt="">
                        </div>
                        <!-- 图片标题 -->
                        <h2 class="title">图片标题</h2>
                        <!-- 图片描述 -->
                        <p class="description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque temporibus animi voluptate
                            dignissimos sunt maiores provident consequuntur a ex ab non natus deleniti, dolorum
                            repellendus dolores suscipit aliquam maxime ut!
                        </p>
                    </div>
                </div>
                <!-- 时间 -->
                <div class="time-container">
                    <p class="time">2024-03-12</p>
                </div>
            </div>
        </div>
        <!-- 图片加载中 -->
        <div class="img-display-page__loading">
            <p>图片加载中...</p>
        </div>
        <!-- 没有更多了 -->
        <div class="img-display-page__not-more">
            <p>没有更多了</p>
        </div>
    </div>
    <!-- 脚本 -->
    <!-- 随机生成图片展示项 -->
    <script src="./js/rand-create-img-item.js"></script>
    <!-- 控制当前展示图片项 -->
    <script src="./js/index.js"></script>
</body>

</html>